<template>
  <div class="about">
    <h1>This is an about page</h1>
    <!-- <h1>name:{{good.name}} , price: {{good.price}}</h1> -->
    <h1>name:{{name}} , price: {{price}}</h1>
    <button @click="handleClick">修噶name和price</button>
  </div>
</template>

<script setup>

import { reactive,toRefs,toRef,unref } from 'vue'
//定义响应式数据
var good = reactive({ name:'iphone x',price:88 })
//解构对象( 直接解构对象 会导致解构后的数据失去响应式 )
// var {name,price} = good;

//可以借助toRefs方法将reactive定义的响应式数据转换为Ref类型( 会将对象内的每个属性都转为Ref类型 , 这样解构之后的数据依然会保留响应式的特点 )
var {name,price} = toRefs(good);

//可以借助toRef方法将对象的某个属性转换为Ref类型
var cname = toRef(good,'name')
//可以借助unref方法将Ref类型的数据转换为普通数据(原始值)
var name  = unref(cname)


var handleClick = ()=>{
  name.value = 'oppo',
  price.value = 999;
}

</script>